<script setup lang="ts">
import type { MirrorQueryCondition } from "@/modules/dev-env/mirror/condition.ts";
import { onMounted, ref, shallowRef } from "vue";
import type { DefaultOptionType } from "ant-design-vue/es/vc-select/Select";

defineOptions({ name: "install-mirror-condition" });

const { condition } = defineProps<{
  condition: MirrorQueryCondition;
}>();

const emits = defineEmits<{
  (e: "ready", condition: MirrorQueryCondition): void;
  (e: "change", value: any, condition: MirrorQueryCondition): void;
}>();

const options = shallowRef<DefaultOptionType[]>([]);
const loading = ref(false);
onMounted(async () => {
  try {
    loading.value = true;
    const dataSource = await condition.getDataSource();
    options.value = dataSource;
    if ((condition.value == null || condition.value === "") && dataSource.length > 0) {
      condition.value = dataSource[0].value;
    }

    condition.ready = true;
    emits("ready", condition);
  } finally {
    loading.value = false;
  }
});

const handleValueChange = (value: any) => {
  condition.value = value;
  emits("change", value, condition);
};
</script>

<template>
  <a-form-item :label="condition.name">
    <a-select
      v-bind="condition.selectProps"
      style="width: 180px"
      :value="condition.value"
      @change="handleValueChange"
      :loading="loading"
      :options="options"
      placeholder="请选择"
    />
  </a-form-item>
</template>

<style scoped lang="less"></style>
